<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template #nav-center>购物街</template>
    </nav-bar>
    <tab-control 
      :controls="['流行','新款','精选']" 
      @tabclick="tabclick" 
      ref="tabcontrol2" 
      v-show="isfixed" 
      class="tabcontrol2">
    </tab-control>
    <scroll class="scroll" 
            ref="scroll" 
            :probe-type="3" 
            @scroll="scroll" 
            :pull-up-load="true" 
            @pullup="pullup">
      <home-swiper :banners="banners" @imgload="imgload"></home-swiper>
      <home-recommend :recommends="recommends"></home-recommend>
      <home-feature></home-feature>
      <tab-control 
        :controls="['流行','新款','精选']" 
        @tabclick="tabclick" 
        ref="tabcontrol">
      </tab-control>
      <goods-list :goodslist="goods[goodstype].list"></goods-list>
    </scroll>
    <back-top @click.native="backclick" v-show="iscurrent"></back-top>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar';
import TabControl from '@/components/content/tabcontrol/TabControl';
import GoodsList from '@/components/content/goodslist/GoodsList';
import Scroll from '@/components/common/scroll/Scroll';
import BackTop from '@/components/common/backtop/BackTop'

import HomeSwiper from './childcomps/HomeSwiper';
import HomeRecommend from './childcomps/HomeRecommend';
import HomeFeature from "./childcomps/HomeFeature";

import { getHomeMultiData, getHomeGood } from '@/network/home';
import debounce from '@/common/debounce'

export default {
  name: "Home",
  components: {
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
    HomeSwiper,
    HomeRecommend,
    HomeFeature
  },
  data() {
    return {
      banners: null,
      recommends: null,
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      goodstype: "pop",
      iscurrent: false,
      controlheight: null,
      goodsheight: null,
      isfixed: false,
      positionY:0
    };
  },
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollTo(0,this.positionY,0);
  },
  deactivated() {
    this.positionY = this.$refs.scroll.positionY();
  },
  created() {
    //调用methods内的获取轮播图数据函数
    this.getHomeMultiData();
    //调用methods内的获取商品函数
    this.getHomeGood("pop");
    this.getHomeGood("new");
    this.getHomeGood("sell");    
    
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh,200);
    this.$bus.$on('imgfinishload',() => {
      refresh()
    })
  },
  methods: {
    //事件监听的函数
    //用来监听tabcontrol哪个被点击
    tabclick(index) {
      switch (index) {
        case 0:
          this.goodstype = "pop";
          break;
        case 1:
          this.goodstype = "new";
          break;
        case 2:
          this.goodstype = "sell";
          break;
      };
      //让两个tab-control点击同步
      this.$refs.tabcontrol.currentindex = index;
      this.$refs.tabcontrol2.currentindex = index;
      //切换类别跳转到tabcontrol顶端（自己加的，嘻嘻，注意scrollto的第二个参数是负数）
      this.$refs.scroll.scrollTo(0,-this.controlheight);
    },
    //回到顶部
    backclick(){
      this.$refs.scroll.scrollTo(0,0)
    },
    //监听滑动距离
    scroll(position){
      // console.log(position)
      this.iscurrent = (-position.y) > 1000,
      this.isfixed = (-position.y) > this.controlheight
    },
    //上拉加载更多
    pullup(){
      // console.log('shangla')
      this.getHomeGood(this.goodstype);
      this.$refs.scroll.finishPullUp();
    },    
    //获取tabcontrol距离顶端的高度
    imgload(){
      this.controlheight = this.$refs.tabcontrol.$el.offsetTop;
    },

    // 通过axios获取数据的函数
    getHomeMultiData() {
      getHomeMultiData().then(res => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    getHomeGood(type) {
      let page = this.goods[type].page + 1;
      getHomeGood(type, page).then(res => {
        // console.log(res);
        this.goods[type].list.push(...res.data.data.list);
        //将页码+1
        this.goods[type].page += 1;
      });
    }
  }
};
</script>

<style scoped>
#home {
  height: 100vh;
}

.home-nav {
  background-color: deeppink;
  color: #fff;  
}

.scroll {
  height: calc(100vh - 93px);
  overflow: hidden;
  position: relative;
}

.tabcontrol2 {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
}

</style>